<template>
  <div class="login-main">
    <div class="login-title">涉案管理系统</div>
    <div class="login-box">
      <div class="login-row clearfix" style="margin-bottom: 5px">
        <!--@keyup.enter:与v-on:input区别在于：input是实时监控，每次输入都会调用，
        而@keyup.enter事件则是在pc上需要点击回车键触发。-->
        <input type="text" class="login-user" placeholder="用户名/手机号/邮箱" v-model="username" @keyup.enter="handleLogin" />
      </div>
      <div class="login-row">
        <input type="password" class="login-password" placeholder="密码" v-model="password" @keyup.enter="handleLogin" />
      </div>
      <div class="login-checkbox-row">
        <el-checkbox class="login-checkbox" v-model="passwordChecked">记住密码</el-checkbox>
      </div>
      <div class="login-btn" @click="handleLogin">登 录</div>
    </div>
    <div class="login-box-shadow"></div>
    <div class="login-version">Version {{ version }}</div>
  </div>
</template>

<script>
import { VERSION } from '../utils/global'
import { isEmpty, getDESEncodeString, getDESDecodeString, getMd5EncodeString } from '../utils/util'
import { getMenuList } from '../utils/menu'
import { addDynamicRoutes } from '../router'
import { getAction, postAction } from '@/utils/manage'

export default {
  name: 'login',
  data() {
    return {
      username: '',
      password: '',
      isChinese: true,
      passwordChecked: false,
      version: VERSION
    }
  },
  created() {
    let userName = this.$cookies.get('userName'),
      password = this.$cookies.get('password')
    if (!isEmpty(userName, password)) {
      this.username = userName
      this.password = getDESDecodeString(password, 'ht@123456', '00000000')
      this.passwordChecked = true
    }
  },
  methods: {
    handleLogin() {
      const { username, password } = this
      if (isEmpty(username)) {
        this.$message.warning('请输入用户名')
        return
      } else if (isEmpty(password)) {
        this.$message.warning('请输入密码')
        return
      }
      postAction('/auth/loginWithMore', {
        username,
        password: getMd5EncodeString(password)
      })
        .then(data => {
          const { token, menu, user } = data.result
            // console.log(data.result)
          // 是否记住密码
          if (this.passwordChecked) {
            this.$cookies.set('userName', username, { expires: 7 })
            this.$cookies.set('password', getDESEncodeString(password, 'ht@123456', '00000000'), { expires: 7 })
          } else {
            this.$cookies.remove('userName')
            this.$cookies.remove('password')
          }
          const routerList = getMenuList(menu)
            // console.log(routerList)
          this.$http.defaults.headers.common['Authorization'] = 'Bearer ' + token
          sessionStorage.setItem('menuList', JSON.stringify(menu))
          sessionStorage.setItem('userData', JSON.stringify(user))
          sessionStorage.setItem('token', token)
          sessionStorage.setItem('routerList', JSON.stringify(routerList))
          this.$store.dispatch('setUserInfo', user)
          this.$store.dispatch('setToken', token)
          this.$store.dispatch('setMenuList', menu)
          this.$store.dispatch('setRouterList', routerList)
          addDynamicRoutes(routerList)
          this.$router.push('/index')
        })
        .catch(() => {
          sessionStorage.setItem('menuList', '')
          sessionStorage.setItem('userData', '')
          sessionStorage.setItem('token', '')
          sessionStorage.setItem('routerList', '')
          this.$store.dispatch('setUserInfo', {})
          this.$store.dispatch('setToken', '')
          this.$store.dispatch('setMenuList', [])
          this.$store.dispatch('setRouterList', [])
        })
    }
  }
}
</script>
<!--scoped：样式只在当前组件内生效-->
<style scoped>
.login-main {
  width: 100%;
  height: 100%;
  min-width: 1366px;
  background: url(../assets/images/login-bg.png) no-repeat center;
  font-size: 14px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.login-title {
  font-size: 24px;
  color: white;
  font-weight: bold;
  margin-top: 15px;
}
.login-box {
  width: 500px;
  height: 300px;
  border-radius: 20px;
  margin-top: 40px;
  background: white;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 30px 85px;
  align-items: center;
}
.login-row {
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #929496;
}
.login-row input {
  width: calc(100% - 35px);
  height: 100%;
  color: #929496;
  padding: 0 0 0 35px;
  font-size: 16px;
  border: none;
}
.login-row input:focus {
  outline: none;
}
.login-row input.login-user {
  background: white url(../assets/images/login-user-icon.png) no-repeat 0 center;
}
.login-row input.login-password {
  background: white url(../assets/images/login-pwd-icon.png) no-repeat 0 center;
}
.login-btn {
  width: 240px;
  height: 44px;
  margin-top: 36px;
  line-height: 44px;
  background: #0179ff;
  text-align: center;
  color: #fff;
  font-size: 16px;
  border-radius: 10px;
}
.login-btn:hover {
  cursor: pointer;
  background: rgba(1, 121, 255, 0.9);
}
.login-box-shadow {
  width: 500px;
  height: 60px;
  background: url(../assets/images/login-box-shadow.png) no-repeat center;
  margin-top: 20px;
}
.login-language {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
}
.login-language-division {
  margin: 0 10px;
  width: 2px;
  font-size: 14px;
  color: #ccc;
  line-height: 1;
}
.languageChecked {
  color: white;
}
.login-checkbox-row {
  width: 100%;
  display: flex;
  margin-top: 15px;
  justify-content: flex-end;
}
.login-checkbox-row .el-checkbox {
  font-weight: normal;
}
.login-version {
  position: absolute;
  bottom: 20px;
  color: white;
}
</style>
